<div class="content">
    <div id="example_title">
        <h1>Numeric Fields</h1>
        Numeric inputs will only allow you to type numbers, ignoring other characters. Full keyboard support is implemented.
        Try using up/down arrow keys, ctr + up/down (command + up/down on mac) to increase numbers.
        When the number is changed it will be validated and formatted (if needed).
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->

<div class="block">
    <b>General</b>
</div>
<div class="w2ui-field">
    <label>Integer:</label>
    <div><input id="w2int"></div>
</div>
<div class="w2ui-field">
    <label>Float:</label>
    <div><input id="w2float"></div>
</div>
<div class="w2ui-field">
    <label>Hex:</label>
    <div><input id="w2hex"></div>
</div>
<div class="w2ui-field">
    <label>Binary:</label>
    <div><input id="w2bin"></div>
</div>
<div class="w2ui-field">
    <label>Color:</label>
    <div><input id="w2color" style="text-align: left"></div>
</div>

<div class="block">
    <b>US Format</b>
</div>
<div class="w2ui-field">
    <label>Integer:</label>
    <div><input id="us-int" value="0"></div>
</div>
<div class="w2ui-field">
    <label>Float:</label>
    <div><input id="us-float" value="0"></div>
</div>
<div class="w2ui-field">
    <label>Money:</label>
    <div><input id="us-money" value="0"></div>
</div>
<div class="w2ui-field">
    <label>Percent:</label>
    <div><input id="us-percent" value="0"></div>
</div>

<div class="block">
    <b>EU Common Format</b>
</div>
<div class="w2ui-field">
    <label>Integer:</label>
    <div><input id="eu-int" value="0"></div>
</div>
<div class="w2ui-field">
    <label>Float:</label>
    <div><input id="eu-float" value="0"></div>
</div>
<div class="w2ui-field">
    <label>Money:</label>
    <div><input id="eu-money" value="0"></div>
</div>
<div class="w2ui-field">
    <label>Percent:</label>
    <div><input id="eu-percent" value="0"></div>
</div>

<style>
.block {
    padding-top: 20px;
    padding-bottom: 10px;
    color: #999;
}
.w2ui-field input {
    width: 100px;
    text-align: right;
}
.w2ui-field > div > span {
    margin-left: 20px;
}
</style>

<!--CODE-->
<script type="module">
import { w2field, query } from '__W2UI_PATH__'
// General
new w2field({ el: query('#w2int')[0], type: 'int', autoFormat: false })
new w2field({ el: query('#w2float')[0], type: 'float', autoFormat: false })
new w2field({ el: query('#w2hex')[0], type: 'hex' })
new w2field({ el: query('#w2bin')[0], type: 'bin' })
new w2field({ el: query('#w2color')[0], type: 'color' })

// US Format
new w2field('int', { el: query('#us-int')[0] })
new w2field('float', { el: query('#us-float')[0], precision: 3 })
new w2field('money', { el: query('#us-money')[0] })
new w2field('percent', { el: query('#us-percent')[0], precision: 1, min: 0, max: 100 })

// EU Common Format
new w2field('int', { el: query('#eu-int')[0], autoFormat: true, groupSymbol: ' ' })
new w2field('float', { el: query('#eu-float')[0], groupSymbol: ' ', precision: 3 })
new w2field('money', { el: query('#eu-money')[0], groupSymbol: ' ', currencyPrefix: '', currencySuffix: '€' })
new w2field('percent', { el: query('#eu-percent')[0], precision: 1, min: 0, max: 100 })
</script>
